<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书管理系统 - 图书列表</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
        .search-form { background-color: #f8fafc; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
        .search-form input, .search-form select { padding: 8px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; }
        .search-form input[type="button"] {
            padding: 8px 15px;
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .search-form input[type="button"]:hover { background-color: #1d4ed8; }
        .search-form input[type="reset"] {
            padding: 8px 15px;
            background-color: #94a3b8;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .search-form input[type="reset"]:hover { background-color: #64748b; }

        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { padding: 10px; border: 1px solid #ddd; text-align: center; }
        th { background-color: #f1f5f9; color: #334155; }
        tr:nth-child(even) { background-color: #f8fafc; }
        tr:hover { background-color: #e2e8f0; }

        .status-available { color: #16a34a; font-weight: 500; }
        .status-borrowed { color: #f59e0b; font-weight: 500; }
        .action-btn { color: #2563eb; text-decoration: none; margin: 0 5px; }
        .action-btn:hover { text-decoration: underline; }

        .no-result { text-align: center; padding: 20px; color: #94a3b8; }
    </style>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">
</head>
<body id="app">
<div class="search-form">
    <form>
        <input type="text" v-model="book.name" placeholder="请输入书名">
        <input type="text" v-model="book.author" placeholder="请输入作者">
        <input type="text" v-model="book.press" placeholder="请输入出版社">
        <select v-model="book.statu">
            <option value="">全部</option>
            <option value="1">在馆</option>
            <option value="0">已借出</option>
        </select>
        <input type="button" value="查询" @click="doList">
        <input type="button" value="重置" @click="resetForm"> <!-- 自定义重置按钮 -->
    </form>
</div>

<h1>图书列表</h1>
<table>
    <tr>
        <th>序号</th>
        <th>ID</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版日期</th>
        <th>出版社</th>
        <th>价格</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <!-- 无数据提示 -->
    <tr v-if="books.length === 0">
        <td colspan="9" class="no-result">暂无数据</td>
    </tr>
    <!-- 图书列表 -->
    <tr v-for="(book, index) in books" :key="book.ID"> <!-- 用ID作为key更稳定 -->
        <td>{{ index + 1 }}</td>
        <td>{{ book.ID }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
        <td>{{ book.date }}</td>
        <td>{{ book.press }}</td>
        <td>{{ book.price }}</td>
        <td :class="book.statu === '1' ? 'status-available' : 'status-borrowed'">
            {{ book.statu === '1' ? '在馆' : '已借出' }}
        </td>
        <td>
            <a :href="`/dem1/test/updateBook.html?ID=${book.ID}`" class="action-btn">修改</a>
            <a href="javascript:void(0)" @click="deleteBook(book.ID)" class="action-btn">删除</a>
        </td>
    </tr>
</table>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                book: { // 查询条件
                    name: '',
                    author: '',
                    press: '',
                    statu: ''
                },
                books: [] // 图书列表数据
            }
        },
        methods: {
            // 查询图书列表
            doList() {
                axios({
                    method: 'get',
                    url: '/dem1/book',
                    params: this.book // GET请求用params传参
                }).then(response => {
                    this.books = response.data || []; // 确保是数组
                }).catch(error => {
                    console.error('查询失败:', error);
                    alert('查询失败，请重试');
                });
            },
            // 重置查询条件
            resetForm() {
                this.book = {
                    name: '',
                    author: '',
                    press: '',
                    statu: ''
                };
            },
            // 删除图书
            deleteBook(id) {
                if (confirm(`确定要删除ID为${id}的图书吗？`)) {
                    axios({
                        method: 'delete',
                        url: `/dem1/book/${id}`
                    }).then(response => {
                        const result = response.data;
                        if (result.success || result > 0) { // 兼容后端不同返回格式
                            alert('删除成功');
                            this.doList(); // 刷新列表
                        } else {
                            alert('删除失败');
                        }
                    }).catch(error => {
                        console.error('删除失败:', error);
                        alert('删除失败，请重试');
                    });
                }
            }
        },
        mounted() {
            // 页面加载时自动查询
            this.doList();
        }
    }).mount('#app');
</script>
</body>
</html>